<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient @sendinfo="getInfo"></ChangePatient>
		
		<!-- 状态切换栏 -->
		<view class="statustab_bar">
			<view class="status" :class="{active:status==0}" @click="tab_status(0)">
				待取号
			</view>
			<view class="status" :class="{active:status==1}" @click="tab_status(1)">
				已取号
			</view>
		</view>
		
		<!-- 内容切换 -->
		<view class="switch_content">
			<!-- 待取号 -->
			<view class="pending_retrieval" v-if="status==0">
				<view class="doctorlists">
					<image style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="registerlists.length==0"></image>
					<view class="doctorlist" v-for="(item,index) in registerlists" :key="index">
						<view class="doctorInfo">
							<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
							<view class="textInfo">
								<view class="name_call">
									<view class="name">
										{{item.name}}
									</view>
									<view class="call">
										{{item.call}}
									</view>
								</view>
								<view class="depart_campus">
									<view class="depart">
										{{item.depart}}
									</view>
									<view class="campus">
										四川省保健院南苑
									</view>
								</view>
							</view>
						</view>
						<view class="patient_info">
							<view class="patient_list">
								<view class="list_title">
									就诊人
								</view>
								<view class="list_content">
									{{item.patient}}
								</view>
							</view>
							<view class="patient_list">
								<view class="list_title">
									预约时间
								</view>
								<view class="list_content">
									{{item.registortime}}（{{item.registortime.split(' ')[1]=='14:00-18:00'?'下午':'上午'}}）
								</view>
							</view>
						</view>
						<view class="operte">
							<button class="Gooffer" @click="offerNumber(item.offernumber_id)" v-if="times(item.registortime.split(' ')[1]=='14:00-18:00'?'下午':'上午')">去取号</button>
							<button class="Disoffer" v-else :disabled="true">{{item.registortime.split(' ')[1]=='14:00-18:00'?'下午':'上午'}}{{item.registortime.split(' ')[1]}}可取号</button>
						</view>
					</view>
					<!-- <view class="doctorlist">
						<view class="doctorInfo">
							<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u827.png" mode="widthFix"></image>
							<view class="textInfo">
								<view class="name_call">
									<view class="name">
										张医生
									</view>
									<view class="call">
										主任医师
									</view>
								</view>
								<view class="depart_campus">
									<view class="depart">
										口腔科
									</view>
									<view class="campus">
										四川省保健院南苑
									</view>
								</view>
							</view>
						</view>
						<view class="patient_info">
							<view class="patient_list">
								<view class="list_title">
									就诊人
								</view>
								<view class="list_content">
									王小柯
								</view>
							</view>
							<view class="patient_list">
								<view class="list_title">
									预约时间
								</view>
								<view class="list_content">
									2020-01-27  14:30-17:00（下午）
								</view>
							</view>
						</view>
						<view class="operte">
							<button class="Disoffer" :disabled="true">下午13:30-17:00可取号</button>
						</view>
					</view>
				 -->
				</view>
			</view>
			<!-- 已取号 -->
			<view class="offer_number" v-if="status==1">
				<view class="doctorlists">
					<image style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="registerlists.length==0"></image>
					<view class="doctorlist" v-for="(item,index) in registerlists" :key="index">
						<view class="doctorInfo">
							<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
							<view class="textInfo">
								<view class="name_call">
									<view class="name">
										{{item.name}}
									</view>
									<view class="call">
										{{item.call}}
									</view>
								</view>
								<view class="depart_campus">
									<view class="depart">
										{{item.depart}}
									</view>
									<view class="campus">
										四川省保健院南苑
									</view>
								</view>
							</view>
						</view>
						<view class="patient_info">
							<view class="patient_list">
								<view class="list_title">
									就诊人
								</view>
								<view class="list_content">
									{{item.patient}}
								</view>
							</view>
							<view class="patient_list">
								<view class="list_title">
									预约号
								</view>
								<view class="list_content">
									20200101020
								</view>
							</view>
							<view class="patient_list">
								<view class="list_title">
									预约时间
								</view>
								<view class="list_content">
									{{item.registortime}}（{{item.registortime.split(' ')[1]=='14:00-18:00'?'下午':'上午'}}）
								</view>
							</view>
							<view class="patient_list">
								<view class="list_title">
									就诊地点
								</view>
								<view class="list_content">
									南苑门诊大楼二楼520诊室
								</view>
							</view>
						</view>
						<view class="lineup_code">
							排队号：{{item.offercode}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const registerlists = reactive([])
	const today8AM = ref(0)
	const today12AM = ref(0)
	const today14AM	= ref(0)
	const today18AM = ref(0)
	const patientid = ref(0)
	onLoad(()=>{
		today8AM.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 8, 0, 0, 0).getTime()
		today12AM.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 14, 0, 0, 0).getTime()
		today14AM.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 12, 0, 0, 0).getTime()
		today18AM.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 18, 0, 0, 0).getTime()
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:0
		}).then(res=>{
			patientid.value = res.datas[0].patient_id
			api('/appselectoffnum',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				registerlists.push(...res.data)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	})
	// 取号转态改变
	const status = ref(0)
	const tab_status = (index) => {
		status.value=index
		registerlists.splice(0)
		api('/appoffnumstatus',{
			patient_id:patientid.value,
			status:index == 0?'待取号':'已取号'
		}).then(res=>{
			registerlists.push(...res.data)
		}).catch(err=>{
			console.log(err)
		})
	}
	// 去取号
	const offerNumber = (id) => {
		console.log('去取号')
		uni.navigateTo({
			url:'/pages/Number_details/Number_details?offernumid='+id
		})
	}
	const times = (time)=>{
		if(time=='上午'){
			if(new Date().getTime()>today8AM.value && new Date().getTime()<today12AM.value){
				return true
			}
		}else{
			if(new Date().getTime()>today14AM.value && new Date().getTime()<today18AM.value){
				return true
			}
		}
	}
	const getInfo = (data) => {
		status.value = 0
		registerlists.splice(0)
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:data.member_id?data.member_id:0
		}).then(res=>{
			patientid.value = res.datas[0].patient_id
			api('/appselectoffnum',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				registerlists.push(...res.data)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 状态切换栏
		.statustab_bar{
			width: 100%;
			height: 82rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			.status{
				width: 50%;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				cursor: pointer;
			}
			.active{
				background-color: rgba(22, 119, 255, 1);
				color: #fff;
			}
		}
		// 内容切换
		.switch_content{
			// 待取号
			.pending_retrieval{
				.doctorlists{
					.doctorlist{
						width: 100%;
						height: 388rpx;
						background-color: #fff;
						padding: 40rpx 30rpx 40rpx 50rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						margin-bottom: 30rpx;
						.doctorInfo{
							display: flex;
							align-items: center;
							.textInfo{
								margin-left: 40rpx;
								.name_call{
									height: 50rpx;
									display: flex;
									align-items: baseline;
									font-family: 'Microsoft YaHei UI', sans-serif;
									font-size: 26rpx;
									color: #1F1F1F;
									.name{
										font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
										font-weight: 700;
										color: #000;
										font-size: 36rpx;
										margin-right: 36rpx;
									}
								}
								.depart_campus{
									margin-top: 4rpx;
									display: flex;
									align-items: center;
									font-family: 'Microsoft YaHei UI', sans-serif;
									font-size: 28rpx;
									color: #AAAAAA;
									.campus{
										margin-left: 28rpx;
									}
								}
							}
						}
						.patient_info{
							margin-top: 38rpx;
							.patient_list{
								height: 40rpx;
								display: flex;
								align-items: center;
								font-family: 'Microsoft YaHei UI', sans-serif;
								font-size: 28rpx;
								color: #000;
								margin-bottom: 16rpx;
								.list_title{
									width: 114rpx;
									color: #AAAAAA;
									margin-right: 60rpx;
								}
							}
						}
						.operte{
							display: flex;
							align-items: center;
							justify-content: flex-end;
							margin-top: 20rpx;
							.Gooffer{
								width: 200rpx;
								height: 70rpx;
								line-height: 70rpx;
								background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E8%87%AA%E5%8A%A9%E5%8F%96%E5%8F%B7/u3536.svg');
								background-size: cover;
								font-family: 'ArialMT', 'Arial', sans-serif;
								font-size: 28rpx;
								color: #fff;
								margin: 0 !important;
							}
							.Disoffer{
								padding: 0 12rpx;
								height: 70rpx;
								line-height: 70rpx;
								background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E8%87%AA%E5%8A%A9%E5%8F%96%E5%8F%B7/u3551.svg');
								background-size: cover;
								font-family: 'ArialMT', 'Arial', sans-serif;
								font-size: 28rpx;
								color: #FFFFFF;
								margin:  0 !important;
							}
							.Disoffer::after{
								border: none !important;
							}
						}
					}
				}
			}
			// 已取号
			.offer_number{
				.doctorlists{
					.doctorlist{
						width: 100%;
						height: 514rpx;
						background-color: #fff;
						padding: 40rpx 30rpx 40rpx 50rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						margin-bottom: 30rpx;
						.doctorInfo{
							display: flex;
							align-items: center;
							.textInfo{
								margin-left: 40rpx;
								.name_call{
									height: 50rpx;
									display: flex;
									align-items: baseline;
									font-family: 'Microsoft YaHei UI', sans-serif;
									font-size: 26rpx;
									color: #1F1F1F;
									.name{
										font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
										font-weight: 700;
										color: #000;
										font-size: 36rpx;
										margin-right: 36rpx;
									}
								}
								.depart_campus{
									margin-top: 4rpx;
									display: flex;
									align-items: center;
									font-family: 'Microsoft YaHei UI', sans-serif;
									font-size: 28rpx;
									color: #AAAAAA;
									.campus{
										margin-left: 28rpx;
									}
								}
							}
						}
						.patient_info{
							margin-top: 38rpx;
							.patient_list{
								height: 40rpx;
								display: flex;
								align-items: center;
								font-family: 'Microsoft YaHei UI', sans-serif;
								font-size: 28rpx;
								color: #000;
								margin-bottom: 16rpx;
								.list_title{
									width: 114rpx;
									color: #AAAAAA;
									margin-right: 60rpx;
								}
							}
						}
						.lineup_code{
							width: 598rpx;
							height: 72rpx;
							margin-top: 36rpx;
							line-height: 72rpx;
							text-align: center;
							background-color: rgba(242, 242, 242, 1);
							border-radius: 16rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}       
</style>
